<template>
    <div class="calenda">
        <!-- 顶部年月部分 -->
        <div class="year">
            <div class="year-show">
                <i class="iconfont icon-shuangjiantou-zuo" @click="preYear"></i>
                <i class="iconfont icon-zuojiantou" @click="preMonth"></i>
                <span class="year-show-title">{{currentShowYear}}年{{currentShowMonth}}月</span>
                <i class="iconfont icon-youjiantou"  @click="nextMonth"></i>
                <i class="iconfont icon-shuangjiantou-you"  @click="nextYear"></i>
            </div>
        </div>
        <!-- 星期 -->
        <div class="week">
            <ul>
                <li v-for="(item,index) in weekList" :key="item" :class="{'is-rest':index==5 || index==6}">{{item}}</li>
            </ul>
        </div>
        <!-- 具体日期 -->
        <div class="day">
            <ul>
                <li 
                    v-for="item in allDays" 
                    :key='item.date'
                >
                    <p 
                        :class="{'not-current-month':item.month!=currentShowMonth,'is-current-day':item.year==currentYear && item.month==currentMonth && item.day==currentDay,'is-rest-date':(item.week==6 || item.week==0) && item.month==currentShowMonth}"
                    >{{item.day}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            currentYear:'',//当天日期所属年份
            currentMonth:'',//当天日期所属月份
            currentDay:'',//当天日期所属日期
            currentWeek:1,
            weekList:["一","二","三","四","五","六","日"],
            allDays:[],
            lastMonthDay:30,
            currentShowYear:'',//当前展示日期
            currentShowMonth:'',//当前展示日期
        }
    },
    mounted(){
        this.getNowDateInfo();
        this.initDate();//dateStr格式2021-12
    },
    methods:{
        //得到当天日期数据，用于展示当天日期样式
        getNowDateInfo(){
            let date=new Date();
            //年
            this.currentShowYear=this.currentYear=date.getFullYear();
            //月 <10?'0'+(date.getMonth()+1):date.getMonth()+1
            this.currentShowMonth=this.currentMonth=date.getMonth()+1;
            //日
            this.currentDay=date.getDate();
            //周几
            this.currentWeek=date.getDay();
        },
        initDate(dateStr=null){
            let date;
            let alldayList=[];
            if(dateStr){
                date=new Date(dateStr);//指定日期的日期对象
            }else{
                date=new Date();//当前日期对象
            }
            //年
            let dateYear=date.getFullYear();
            //月
            let dateMonth=date.getMonth()+1;
            //获取当月天数
            let nowMonthDays=new Date(dateYear,dateMonth,0).getDate();
            //获取上一个月天数
            this.lastMonthDay=new Date(dateYear,date.getMonth(),0).getDate();
            //设置当月循环的天数 allDays
            for(let i=0;i<nowMonthDays;i++){
                alldayList.push({
                    day:i+1,
                    month:dateMonth,
                    year:dateYear,
                    week:new Date(`${dateYear}-${dateMonth}-${i+1}`).getDay(),
                    date:`${dateYear}-${dateMonth}-${i+1}`,//作为key值
                })
            }
            //获取某年某月第一天是周几
            let firstDay=this.getMonthFirstDayWeek(date);
            //获取某年某月最后一天是周几
            let lastDay=this.getMonthLastDayWeek(date);
            //用上一个月天数补齐当月空缺，并置灰
            if(firstDay!=1){
                //当获取的firstDay为周日时，此时值为0
                if(firstDay==0){
                    for(let i=0;i<6;i++){
                        alldayList.unshift({
                            day:this.lastMonthDay-i,
                            month:date.getMonth(),
                            year:dateYear,
                            week:new Date(`${dateYear}-${date.getMonth()}-${this.lastMonthDay-i}`).getDay(),
                            date:`${dateYear}-${date.getMonth()}-${this.lastMonthDay-i}`,//作为key值
                        });
                    }
                }else{
                    for(let i=0;i<firstDay-1;i++){
                        alldayList.unshift({
                            day:this.lastMonthDay-i,
                            month:date.getMonth(),
                            year:dateYear,
                            week:new Date(`${dateYear}-${date.getMonth()}-${this.lastMonthDay-i}`).getDay(),
                            date:`${dateYear}-${date.getMonth()}-${this.lastMonthDay-i}`,//作为key值
                        });
                    }
                }
                
            }
            //用下一个月天数补齐当月月尾空缺位置，并置灰
            if(lastDay!=0){
                for(let i=0;i<7-lastDay;i++){
                    alldayList.push({
                        day:i+1,
                        month:date.getMonth()+2,
                        year:dateYear,
                        week:new Date(`${dateYear}-${date.getMonth()+2}-${i+1}`).getDay(),
                        date:`${dateYear}-${date.getMonth()+2}-${i+1}`,//作为key值
                    });
                }
            }
            this.allDays=alldayList;
        },
        //格式化日期
        formatDate(year,month,day=1){
            return `${year}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`
        },
        //获取某年某月第一天是周几
        getMonthFirstDayWeek(date){
            let year=date.getFullYear();
            let month=date.getMonth();
            let firstDay=new Date(year,month,1);
            return firstDay.getDay();
        },
        //获取某年某月最后一天是周几  周日为0
        getMonthLastDayWeek(date){
            let year=date.getFullYear();
            let month=date.getMonth();
            let lastDay=new Date(year,month+1,0);
            return lastDay.getDay();
        },
        //上一月
        preMonth(){
            this.currentShowMonth--;
            if(this.currentShowMonth<1){
                this.currentShowYear--;
                this.currentShowMonth=12;
            }
            this.initDate(this.formatDate(this.currentShowYear,this.currentShowMonth));
        },
        //下一个月
        nextMonth(){
            this.currentShowMonth++;
            if(this.currentShowMonth>12){
                this.currentShowYear++;
                this.currentShowMonth=1;
            }
            this.initDate(this.formatDate(this.currentShowYear,this.currentShowMonth));
        },
        //上一年
        preYear(){
            this.currentShowYear--;
            this.initDate(this.formatDate(this.currentShowYear,this.currentShowMonth));
        },
        //下一年
        nextYear(){
            this.currentShowYear++;
            this.initDate(this.formatDate(this.currentShowYear,this.currentShowMonth));
        },
    }
}
</script>
<style lang="less" scoped>
.calenda{
    width: 100%;
    padding: 10px 15px;
    .year{
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        &-show{
            &-title{
                margin:auto 15px;
            }
            i{
                font-size: 20px;
            }
            i:nth-child(2){
                margin-left: 15px;
            }
            i:nth-child(4){
                margin-right: 20px;
            }
            i:hover{
                cursor: pointer;
            }
        }
    }
    .week{
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
        ul{
            width: 100%;
            display: flex;
            justify-content: space-between;
            li{
                text-align: center;
                width: 14.2%;
                height: 30px;
                line-height: 30px;
                list-style: none;
            }
            .is-rest{
                color: #FE6C60;
            }
        }
    }
    .day{
        width: 100%;
        margin-top: 10px;
        ul{
            width: 100%;
            display: flex;
            justify-content:flex-start;
            flex-wrap: wrap;
            li{
                width: 14.2%;
                height: 40px;
                list-style: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                p{
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 50%;
                }
                .is-current-day{
                    background: #F7D347;
                    color: white;
                }
                .not-current-month{
                    color: #ccc;
                }
                p:hover{
                    cursor: pointer;
                    border: 1px solid #F7D347;
                }
                .is-rest-date{
                    color: #FE6C60;
                }
            }
            
        }
    }
}
</style>